<template>
	<view class="foo-bar-box">
		<view class="nav-item" :class="{'nav-tab-active':selectNav == item.index ,'is-single-img':item.isSingleImg}"
			v-for="(item,index) in navList" :key="index" @click="changeNav(item.index)">
			<template v-if="!item.isSingleImg">
				<view class="nav-item-img">
					<!-- <image :src="item.selectIcon" mode=""></image> -->
					<!-- <image :src="item.notIcon" mode=""></image> -->
					<image :src="selectNav == item.index?item.selectIcon:item.notIcon" mode=""></image>
				</view>
				<view class="nav-item-title">{{item.title}}</view>
			</template>
			<template v-if="item.isSingleImg">
				<view class="nav-item-img">
					<image :src="selectNav == item.index?item.selectIcon:item.notIcon" mode=""></image>
				</view>
			</template>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { NavList } from '@/types/fooBar'

	defineProps({
		selectNav: {
			type: Number,
			default: 0
		}
	})
	const emit = defineEmits(['changeNav'])

	// 菜单列表
	const navList = reactive<NavList[]>([{
		notIcon: '/static/tabbar/dialogue.png',
		selectIcon: '/static/tabbar/dialogue_art.png',
		title: 'AI对话',
		index: 0,
		isSingleImg: false
	},
	{
		notIcon: '/static/tabbar/find.png',
		selectIcon: '/static/tabbar/find_art.png',
		title: '发现',
		index: 1,
		isSingleImg: false
	},
	{
		notIcon: '/static/tabbar/add.png',
		selectIcon: '/static/tabbar/add_art.png',
		title: '加',
		index: 2,
		isSingleImg: true
	},
	{
		notIcon: '/static/tabbar/shopping.png',
		selectIcon: '/static/tabbar/shopping_art.png',
		title: '商城',
		index: 3,
		isSingleImg: false
	},
	{
		notIcon: '/static/tabbar/my.png',
		selectIcon: '/static/tabbar/my_art.png',
		title: '我的',
		index: 4,
		isSingleImg: false
	}
	])

	const changeNav = (index : number) => {
		emit('changeNav', index)
	}
</script>

<style scoped lang="scss">
	.foo-bar-box {
		width: 100%;
		height: 140rpx;
		background: #171717;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;

		.nav-item {
			width: 100%;
			padding-top: 14rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: rgba(255, 255, 255, 0.5);
			font-size: 28rpx;
			font-weight: bold;

			&.nav-tab-active {
				color: #FFFFFF;
			}

			&.is-single-img {

				.nav-item-img {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					background: linear-gradient(to bottom, #C42E2C 0%, #E302B6 100%);
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						position: relative;
					}
				}
			}

			.nav-item-img {
				width: 40rpx;
				height: 40rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0rpx;
					left: 0rpx;
				}
			}

			.nav-item-title {
				margin-top: 10rpx;
			}
		}
	}
</style>